<template>
	<view class="userbox" >
		<view class="userheadbg">
			<view class="userhead" >
				<image :src="userInfo.avatar" mode="" v-if="userInfo&&userInfo.avatar" @click="goUrl('/pages/mine/user')"></image>
				<image src="../../static/defaluthead.png" mode="" v-else></image>
				<view class="user" v-if="userInfo">
					<text>{{userInfo.userName}}</text>
					<view class="">ID:{{userInfo.userId}}</view>
				</view>
				<view class="user" @click="goPubUrl('/pages/login/login')" v-else>
					<text>登录</text>
				</view>
			</view>
			<view class="zupu" >
				<image src="../../static/book.png" mode=""></image>
				<text>我的族谱</text>
			</view>
		</view>
		<view class="useritembg">
			<view class="useritem" @click="goUrl('/pages/mine/addChild')">
				<image src="@/static/u1.png" mode=""></image>
				<text>添加子女</text>
			</view>
			<view class="useritem" @click="goUrl('/pages/mine/record/index')" >
				<image src="@/static/u2.png" mode=""></image>
				<text>录入记录</text>
			</view>
			<view class="useritem" @click="goUrl('/pages/mine/order')" >
				<image src="@/static/u4.png" mode=""></image>
				<text>祭祖订单</text>
			</view>
			<view class="useritem"  @click="goUrl('/pages/mine/sendRecord')" >
				<image src="@/static/u3.png" mode=""></image>
				<text>捐赠记录</text>
			</view>
		</view>
	</view>
	
	<view class="listbg">
		<view class="listitem" @click="goPubUrl('/pages/mine/kefu')">
			<text>夏氏客服</text>
			<image src="@/static/arright.png" mode=""></image>
		</view>
		<view class="listitem" @click="goPubUrl('/pages/mine/help/list')" >
			<text>常见问题</text>
			<image src="@/static/arright.png" mode=""></image>
		</view>
		<view class="listitem" @click="goUrl('/pages/mine/fankui/submit')" >
			<text>意见反馈</text>
			<image src="@/static/arright.png" mode=""></image>
		</view>
		<view class="listitem" @click="goPubUrl('/pages/mine/system')">
			<text>系统设置</text>
			<image src="@/static/arright.png" mode=""></image>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
import {
		miniUserInfo
	} from "@/api/account.js"


	import {
		onShow
	} from "@dcloudio/uni-app";

	let userInfo = ref(null)
	onShow(() => {

		if (uni.getStorageSync('token')) {
			getUserInfo()
		} else {
			userInfo.value = null
		}
	})
	
	function goPubUrl(e){
		uni.navigateTo({
			url:e
		})
		
		
	}
	function goUrl(e){
		if(!uni.getStorageSync('token')){
			uni.navigateTo({
				url:"/pages/login/login"
			})
			return
		}
		uni.navigateTo({
			url:e
		})	
	}
	
	function gologin(){
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
	function getUserInfo(){
		miniUserInfo().then(res=>{
			userInfo.value = res.data
		})
	}
	
   
	
	

	

	
</script>


<style lang="scss">
	page {
		background-image: url('@/static/bgimg.png');
		background-size: 100% 100%;
		overflow: hidden;
	}
	.listbg{
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-left: 30rpx;
		.listitem{
			height: 116rpx;
			display: flex;
			align-items: center;
			width: 610rpx;
			margin-left: 40rpx;
			border-bottom: 1rpx solid #F6F6F6;
			justify-content: space-between;
			text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			image{
				width: 14rpx;height: 25rpx;
			}
		}
	}
	.useritembg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #eee;
		height: 166rpx;
		margin-top: 38rpx;

		.useritem {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 48rpx;
				height: 46rpx;
			}

			text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #111111;
				line-height: 22rpx;
				margin-top: 16rpx;
			}
		}
	}


	.userbox {
		width: 690rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx;
		box-sizing: border-box;
		padding: 42rpx;

		.userheadbg {
			width: 100%;
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.zupu {
				display: flex;
				flex-direction: column;
				align-items: center;

				&>image {
					width: 42rpx;
					height: 48rpx;
				}

				text {
					margin-top: 10rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #C7A46F;
					line-height: 22rpx;
				}
			}

			.userhead {
				display: flex;
				align-items: center;

				&>image {
					width: 132rpx;
					height: 132rpx;
					// background: #D83C3C;
					border-radius: 50%;
					margin-right: 24rpx;
				}

				.user {
					display: flex;
					flex-direction: column;

					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #111111;
					}

					view {
						padding: 0 14rpx;
						width: auto;
						height: 44rpx;
						background: #EDE7DB;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #C7A46F;
						display: flex;
						margin-top: 16rpx;
						align-items: center;
					}
				}
			}
		}
	}

	// 	<view class="userheadbg">
	// 		<view class="userhead">
	// 			<image src="../../static/bag.png" mode=""></image>
	// 			<view class="user">
	// 				<text>姓名</text>
	// 				<view class="">ID:66666</view>
	// 			</view>
	// 		</view>
	// 		<view class="zupu">
	// 			<image src="../../static/bag.png" mode=""></image>
	// 			<text>我的族谱</text>
	// 		</view>
	// 	</view>
</style>